import { StyleSheet, Text, View, ScrollView, Pressable } from 'react-native';
import React, { useEffect } from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTranslation } from 'react-i18next';
import { getDeviceStatus } from '~/utils/socketMessenger';
import { observer, webSocketStore } from '~/store';
import { px2dp, scale } from '~/utils/px2dp';
import { NavBarHeader } from '~/components';

export default observer(() => {
    const router = useRoute<any>();
    const { device_sn } = router.params || {};
    const { device_online } = webSocketStore;
    const navigation: any = useNavigation();
    const { t } = useTranslation();
    useEffect(() => {
        getDeviceStatus(device_sn);
    }, []);
    const onPress = (router) => {
        if (device_online == 1) {
            navigation.navigate(router, { device_sn });
        } else {
            Toast.show({ content: t('DeviceSettings.t4') });
        }
    };
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('DeviceSettings.title')} />
            <ScrollView contentContainerStyle={styles.contentContainerStyle}>
                <Pressable style={styles.listItem} onPress={() => onPress('VolumeControl')}>
                    <Text style={styles.title}>{t('DeviceSettings.t1')}</Text>
                    <Icon name="chevron-forward-outline" size={20} color={'#a4a4a4'}></Icon>
                </Pressable>
                <Pressable style={styles.listItem} onPress={() => onPress('CallRole')}>
                    <Text style={styles.title}>{t('DeviceSettings.t2')}</Text>
                    <Icon name="chevron-forward-outline" size={20} color={'#a4a4a4'}></Icon>
                </Pressable>
                {/* <Pressable style={styles.listItem} onPress={() => onPress('SmokeSettings')}>
                    <Text style={styles.title}>{t('DeviceSettings.t3')}</Text>
                    <Icon name="chevron-forward-outline" size={20} color={'#a4a4a4'}></Icon>
                </Pressable> */}
                <Pressable style={styles.listItem} onPress={() => navigation.navigate('DeviceReadCall')}>
                    <Text style={styles.title}>{t('DeviceSettings.t5')}</Text>
                    <Icon name="chevron-forward-outline" size={20} color={'#a4a4a4'}></Icon>
                </Pressable>
            </ScrollView>
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    contentContainerStyle: {
        flexGrow: 1,
        paddingBottom: '30%',
    },
    listItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        marginHorizontal: px2dp(32),
        marginTop: px2dp(32),
        padding: px2dp(24),
        borderRadius: px2dp(12),
    },
    title: {
        color: '#000',
        fontSize: scale(30),
        fontWeight: 'bold',
    },
});
